import { NavBar, SideBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import React, { useEffect, useState, version } from "react";
import { loaddocterlistAPI } from "../services/products";

function Doctor() {
  const usenavigate = useNavigate();
  const back = () => {
    history.back();
  };
  const [sections, setsection] = useState([]);
  const [num, setnum] = useState(1);
  useEffect(() => {
    loaddocterlistAPI({ per: 5, page: num }).then((res) => {
      console.log(res.data.list);
      setsection(res.data.list);
    });
  }, [num]);
  return (
    <div className="doctors">
      <div className="dtheader">
        <NavBar onBack={back}>医生</NavBar>
      </div>
      <div className="dtlist">
        {sections.map((item: any) => {
          return (
            <div
              key={item.id}
              className="dtitem"
              style={{
                display: "flex",
                marginTop: "1rem",
                border: "1px solid red",
                padding: "0.2rem",
              }}
              onClick={() => {
                // 点击获取医生id
                // console.log(item.id);
                usenavigate("/detaildoctor", {
                  replace: false,
                  state: item.id,
                });
              }}
            >
              <div style={{ display: "flex", flexDirection: "column" }}>
                <img
                  src={item.avatar}
                  alt=""
                  style={{ width: "20vw", height: "20vw" }}
                />
                <i>{item.name}</i>
              </div>
              <div>
                <p
                  className="pxx"
                  style={{
                    // height: "25vw",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    // whiteSpace: "nowrap",
                    fontSize: "0.5rem",
                    lineHeight: "1rem",
                  }}
                >
                  <strong>经验:</strong>
                  {item.desc}
                </p>
              </div>
            </div>
          );
        })}
      </div>
      <button
        onClick={() => {
          console.log(1);
          setnum((num) => {
            return num + 1;
          });
        }}
      >
        下一页
      </button>
    </div>
  );
}

export default Doctor;
